import Menu from 'ant-design-vue/es/menu'
import Icon from 'ant-design-vue/es/icon'

const { Item, SubMenu } = Menu

import menuIcon3 from '../../assets/menuIcon/menuIcon3.png'
import menuIcon3a from '../../assets/menuIcon/menuIcon3a.png'
// 产品碳足迹-产品碳足迹
import menuIcon5 from '../../assets/menuIcon/menuIcon5.png'
import menuIcon5a from '../../assets/menuIcon/menuIcon5a.png'
import menuIcon6 from '../../assets/menuIcon/menuIcon6.png'
import menuIcon6a from '../../assets/menuIcon/menuIcon6a.png'
import menuIcon7 from '../../assets/menuIcon/menuIcon7.png'
import menuIcon7a from '../../assets/menuIcon/menuIcon7a.png'
import menuIcon8 from '../../assets/menuIcon/menuIcon8.png'
import menuIcon8a from '../../assets/menuIcon/menuIcon8a.png'
import menuIcon9 from '../../assets/menuIcon/menuIcon9.png'
import menuIcon9a from '../../assets/menuIcon/menuIcon9a.png'
import menuIcon10 from '../../assets/menuIcon/menuIcon10.png'
import menuIcon10a from '../../assets/menuIcon/menuIcon10a.png'
import menuIcon11 from '../../assets/menuIcon/menuIcon11.png'
import menuIcon11a from '../../assets/menuIcon/menuIcon11a.png'
import menuIcon12 from '../../assets/menuIcon/menuIcon12.png'
import menuIcon12a from '../../assets/menuIcon/menuIcon12a.png'
import menuIcon13 from '../../assets/menuIcon/menuIcon13.png'
import menuIcon13a from '../../assets/menuIcon/menuIcon13a.png'
import menuIcon14 from '../../assets/menuIcon/menuIcon14.png'
import menuIcon14a from '../../assets/menuIcon/menuIcon14a.png'
import menuIcon15 from '../../assets/menuIcon/menuIcon15.png'
import menuIcon15a from '../../assets/menuIcon/menuIcon15a.png'
import menuIcon16 from '../../assets/menuIcon/menuIcon16.png'
import menuIcon16a from '../../assets/menuIcon/menuIcon16a.png'
// 碳排因子库-组织因子库
import menuIcon17 from '../../assets/menuIcon/menuIcon17.png'
import menuIcon17a from '../../assets/menuIcon/menuIcon17a.png'


// 产品碳足迹模块
const productCarbonFootprint = {
    '/module_footprint/footprintHomeView/footprintHomeView': {
        icon: { active: menuIcon3a, inactive: menuIcon3 },
        textKey: 'message.Carbon_footprint_kanban',
        label: '产品碳足迹-碳足迹看板'
    },
    '/module_footprint/footprintProductView/footprintProductView': {
        icon: { active: menuIcon5a, inactive: menuIcon5 },
        textKey: 'message.Product_carbon_footprint',
        label: '产品碳足迹-产品碳足迹'
    },
    '/module_footprint/footprintReportView/footprintReportView': {
        icon: { active: menuIcon6a, inactive: menuIcon6 },
        textKey: 'message.Carbon_footprint_report',
        label: '产品碳足迹-碳足迹报告'
    }
}

// 组织管理模块
const organizationManagement = {
    '/module_organization/userInfo': {
        icon: { active: menuIcon7a, inactive: menuIcon7 },
        textKey: 'message.Personal_center',
        label: '组织管理-个人中心'
    },
    '/module_organization/role/index': {
        icon: { active: menuIcon8a, inactive: menuIcon8 },
        textKey: 'message.Role_management',
        label: '组织管理-角色管理'
    },
    '/module_organization/member/index': {
        icon: { active: menuIcon9a, inactive: menuIcon9 },
        textKey: 'message.User_management',
        label: '组织管理-用户管理'
    },
    '/module_organization/organization/index': {
        icon: { active: menuIcon10a, inactive: menuIcon10 },
        textKey: 'message.Organizational_management',
        label: '组织管理-组织管理'
    }
}

// 组织碳盘查模块
const carbonInventory = {
    '/carbonInventory/template/index': {
        icon: { active: menuIcon11a, inactive: menuIcon11 },
        textKey: 'message.Carbon_accounting_template',
        label: '组织碳盘查-碳核算模板'
    },
    '/carbonInventory/report/index': {
        icon: { active: menuIcon12a, inactive: menuIcon12 },
        textKey: 'message.Carbon_inventory_report',
        label: '组织碳盘查-碳盘查报告'
    },
    '/carbonInventory/kanban/index': {
        icon: { active: menuIcon13a, inactive: menuIcon13 },
        textKey: 'message.Carbon_inventory_kanban',
        label: '组织碳盘查-碳盘查看板'
    },
    '/carbonInventory/organize/index': {
        icon: { active: menuIcon14a, inactive: menuIcon14 },
        textKey: 'message.Organize_carbon_inventory',
        label: '组织碳盘查-组织碳盘查'
    },
    '/carbonInventory/activitie/index': {
        icon: { active: menuIcon15a, inactive: menuIcon15 },
        textKey: 'message.Facility_event_management',
        label: '组织碳盘查-设施/活动管理'
    },
    '/carbonInventory/equipment/index': {
        icon: { active: menuIcon17a, inactive: menuIcon17 },
        textKey: 'message.Emission_source_management',
        label: '组织碳盘查-排放源管理'
    }
}

// 碳排因子库模块
const emissionFactorLibrary = {
    '/module_emission/tpfyzkView/tpfyzkView?database=1': {
        icon: { active: menuIcon17a, inactive: menuIcon17 },
        textKey: 'message.UK_GHG_conversion_factors',
        label: '碳排因子库-英国温室气排放源系数库'
    },
    '/module_emission/tpfyzkView/tpfyzkView?database=2': {
        icon: { active: menuIcon17a, inactive: menuIcon17 },
        textKey: 'message.IPCC_Emission_Source_Database',
        label: '碳排因子库-IPCC排放源系数库'
    },
    '/module_emission/tpfyzkView/tpfyzkView?database=3': {
        icon: { active: menuIcon17a, inactive: menuIcon17 },
        textKey: 'message.Taiwan_Greenhouse_Gas_Inventory_Database',
        label: '碳排因子库-台湾温室气体排放系数库'
    },
    '/module_emission/tpfyzkView/tpfyzkView?database=4': {
        icon: { active: menuIcon17a, inactive: menuIcon17 },
        textKey: 'message.Carbon_Footprint_Database_of_Taiwan_EPA',
        label: '碳排因子库-台湾环保署碳足迹系数库'
    },
    '/module_emission/tpfyzkView/tpfyzkView?database=5': {
        icon: { active: menuIcon17a, inactive: menuIcon17 },
        textKey: 'message.China_Life_Cycle_GHG_Emission_Factor_Database',
        label: '碳排因子库-中国产品全生命周期温室气体排放系数库'
    },
    '/module_emission/tpfyzkView/tpfyzkView?database=8': {
        icon: { active: menuIcon17a, inactive: menuIcon17 },
        textKey: 'message.In_house_Database',
        label: '碳排因子库-平台自有'
    },
    '/module_emission/zzyzkView/zzyzkView': {
        icon: { active: menuIcon17a, inactive: menuIcon17 },
        textKey: 'message.Tissue_factor_library',
        label: '碳排因子库-组织因子库'
    },
    '/module_emission/zzyzkView/zzyzkCollectView': {
        icon: { active: menuIcon17a, inactive: menuIcon17 },
        textKey: 'message.Collection_Database',
        label: '碳排因子库-收藏因子'
    },
}


// 合并所有模块配置
const menuConfig = {
    ...productCarbonFootprint,
    ...organizationManagement,
    ...carbonInventory,
    ...emissionFactorLibrary,
}


let menuIconStyle = {
    // width: "14px",
    // height: "14px",
    // marginRight: "10px",
    // transform: 'translateY(-3px)',

    width: '20px',
    height: '20px',
    marginRight: '8px',
    transform: 'translateY(-3px)',
}

export default {
    name: 'SMenu',
    props: {
        menu: {
            type: Array,
            required: true
        },
        theme: {
            type: String,
            required: false,
            default: 'dark'
        },
        mode: {
            type: String,
            required: false,
            default: 'inline'
        },
        collapsed: {
            type: Boolean,
            required: false,
            default: false
        }
    },
    data() {
        return {
            openKeys: [],
            selectedKeys: [],
            cachedOpenKeys: []
        }
    },
    computed: {
        rootSubmenuKeys: vm => {
            const keys = []
            vm.menu.forEach(item => keys.push(item.path))
            return keys
        }
    },
    mounted() {
        this.updateMenu()
    },
    watch: {
        collapsed(val) {
            if (val) {
                this.cachedOpenKeys = this.openKeys.concat()
                this.openKeys = []
            } else {
                this.openKeys = this.cachedOpenKeys
            }
        },
        $route: function () {
            this.updateMenu()
        }
    },
    methods: {
        // select menu item
        onOpenChange(openKeys) {

            // 在水平模式下时执行，并且不再执行后续
            if (this.mode === 'horizontal') {
                this.openKeys = openKeys
                return
            }
            // 非水平模式时
            const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
            if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
                this.openKeys = openKeys
            } else {
                this.openKeys = latestOpenKey ? [latestOpenKey] : []
            }
        },
        updateMenu() {
            const routes = this.$route.matched.concat()
            const { hidden } = this.$route.meta
            if (routes.length >= 3 && hidden) {
                routes.pop()
                this.selectedKeys = [routes[routes.length - 1].path]
            } else {
                this.selectedKeys = [routes.pop().path]
            }
            let openKeys = []
            if (this.mode === 'inline') {
                routes.forEach(item => {
                    openKeys.push(item.path)
                })
            }

            // update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
            // 包含冒号的是动态菜单
            if (this.selectedKeys[0].includes(':')) {
                let selectedKey = this.$route.fullPath
                this.selectedKeys = [selectedKey]
                let newOpenKeys = []
                this.fullOpenKeys(this.menu, selectedKey, newOpenKeys)
                if (newOpenKeys.length > 0) {
                    openKeys = newOpenKeys.reverse()
                }
            }
            // update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题

            //update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
            if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
                this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
            }
            //update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
        },
        // update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
        // 递归查找当前选中的菜单和父级菜单，填充openKeys
        fullOpenKeys(menus, selectedKey, openKeys) {
            for (let item of menus) {
                if (item.path === selectedKey) {
                    openKeys.push(item.path)
                    this.$emit('updateMenuTitle', item)
                    return true
                } else if (Array.isArray(item.children)) {
                    if (this.fullOpenKeys(item.children, selectedKey, openKeys)) {
                        openKeys.push(item.path)
                        return true
                    }
                }
            }
        },
        // update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题

        // render
        renderItem(menu) {
            if (!menu.hidden) {
                return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
            }
            return null
        },
        renderMenuItem(menu) {
            const target = menu.meta.target || null
            const tag = target && 'a' || 'router-link'
            let props = { to: { name: menu.name } }
            if (menu.route && menu.route === '0') {
                props = { to: { path: menu.path } }
            }

            const attrs = { href: menu.path, target: menu.meta.target }

            if (menu.children && menu.alwaysShow) {
                // 把有子菜单的 并且 父菜单是要隐藏子菜单的
                // 都给子菜单增加一个 hidden 属性
                // 用来给刷新页面时， selectedKeys 做控制用
                menu.children.forEach(item => {
                    item.meta = Object.assign(item.meta, { hidden: true })
                })
            }

            // 获取当前菜单配置
            const config = menuConfig[menu.path]
            let iconElement = null
            if (config) {
                if (config.icon) {
                    const src = this.selectedKeys.includes(menu.path) ? config.icon.active : config.icon.inactive
                    iconElement = <img src={src} alt="" style={menuIconStyle}/>
                }
            } else {
                iconElement = this.renderIcon(menu.meta.icon)
            }

            let titleElement = config ? <span>{this.$t(config.textKey)}</span> : <span>{menu.meta.title}</span>

            return (
                <Item {...{ key: menu.path }}>
                    <tag {...{ props, attrs }}>
                        {iconElement}
                        {titleElement}
                    </tag>
                </Item>
            )
        }

        ,
        renderSubMenu(menu) {
            const itemArr = []
            if (!menu.alwaysShow) {
                menu.children.forEach(item => itemArr.push(this.renderItem(item)))
            }
            return (
                <SubMenu {...{ key: menu.path }}>
          <span slot="title">
            {this.renderIcon(menu.meta.icon)}
              <span>{menu.meta.title}</span>
          </span>
                    {itemArr}
                </SubMenu>
            )
        },
        renderIcon(icon) {
            if (icon === 'none' || icon === undefined) {
                return null
            }
            const props = {}
            typeof (icon) === 'object' ? props.component = icon : props.type = icon

            let iconStyle = {
                // fontSize: '20px',
                // marginRight: "8px",
            }

            return (
                <Icon {...{ props }} style={iconStyle}/>
            )
        }
    },

    render() {
        const { mode, theme, menu } = this
        const props = {
            mode: mode,
            theme: theme,
            openKeys: this.openKeys
        }
        const on = {
            select: obj => {
                this.selectedKeys = obj.selectedKeys
                this.$emit('select', obj)
            },
            openChange: this.onOpenChange
        }

        const menuTree = menu.map(item => {
            if (item.hidden) {
                return null
            }
            return this.renderItem(item)
        })
        // {...{ props, on: on }}
        return (
            <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
                {menuTree}
            </Menu>
        )
    }
}
